<template>
    <div class="rs-gallery pt-20 pb-20 md-pt-20 md-pb-20 style2 half-bg-top">
        <div class="container">
            <div class="sec-title8 mb-20">
                <h2 class="sub-title primary">校园风采</h2> <span class="sub-text">CAMPUS<br>STYLE</span>
            </div>
            <el-image-viewer
                v-if="showPreview"
                :url-list="srcList"
                show-progress
                :initial-index="initial"
                @close="showPreview = false"
            />
            <div class="row margin-0">
                <div class="col-lg-6 mb-0 padding-0 col-md-6 home-gallery big-column">
                    <div class="gallery-part">
                        <div class="gallery-img" 
                        :style="`background-image: url(&quot;${srcList[0]}&quot;);`" @click="handleClick(0)">
                            <a  class="image-popup">
                                <img :src="srcList[0]" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-0 padding-0 col-md-6 home-gallery small-column">
                    <div class="gallery-part">
                        <div class="gallery-img"
                        :style="`background-image: url(&quot;${srcList[1]}&quot;);`" @click="handleClick(1)"
                            >
                            <a 
                                class="image-popup"><img
                                    :src="srcList[1]"
                                    alt=""></a>
                        </div>
                    </div>
                    <div class="gallery-part">
                        <div class="gallery-img"
                            :style="`background-image: url(&quot;${srcList[2]}&quot;);`" @click="handleClick(2)">
                            <a
                                class="image-popup"><img
                                    :src="srcList[2]"
                                    alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-0 padding-0 col-md-6 home-gallery small-column reverse">
                    <div class="gallery-part">
                        <div class="gallery-img"
                        :style="`background-image: url(&quot;${srcList[3]}&quot;);`"  @click="handleClick(3)">
                            <a 
                                class="image-popup"><img
                                    :src="srcList[3]"
                                    alt=""></a>
                        </div>
                    </div>
                    <div class="gallery-part">
                        <div class="gallery-img"
                        :style="`background-image: url(&quot;${srcList[4]}&quot;);`" @click="handleClick(4)"
                         >
                            <a 
                                class="image-popup"><img
                                    :src="srcList[4]"
                                    alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-0 padding-0 col-md-6 home-gallery big-column reverse">
                    <div class="gallery-part">
                        <div class="gallery-img"
                        :style="`background-image: url(&quot;${srcList[5]}&quot;);`" @click="handleClick(5)"
                          >
                            <a 
                                class="image-popup"><img
                                    :src="srcList[5]"
                                    alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 mt-20">
                    <div class="border-bottom"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script   setup>
import { ref,onMounted } from 'vue'
import {getCultureList} from '@/api/api.js'
const initial = ref(0)
const srcList = ref( [
])
const showPreview = ref(false)
const imageRef = ref()
const handleClick = (val) => {
    initial.value = val
    showPreview.value = true
}
onMounted(()=>{
    getCultureList('xyfc','yzzc' ).then((res) => {
        res.data.map((item)=>{
            srcList.value.push(item.cover)
        })
    })
})
</script>